<template>
	<view class="passWordbox">
		<view class="navBox">
			<image src="/static/pages/index/icon_back_lift.png" mode="" class="icon_back_lift" @click="backClick"></image>

			<view class="navWord">修改登录密码</view>
		</view>
		<!-- 账号 -->
		<view class="account">
			<image src="/static/pages/index/loginImg.png" mode=""></image>
			<view class="accountContent">
				<image src="/static/pages/index/passWordImg.png" class="possWordImg" mode=""></image>
				<input type="text" v-model="usetMessage" placeholder="请输入旧密码" placeholder-style="color:#ffffff;font-size:28rpx;"
				 class="accInput" />
			</view>
		</view>
		<!-- 密码 -->
		<view class="passWord">
			<image src="/static/pages/index/loginImg.png" mode=""></image>
			<view class="passWordContent">
				<image src="/static/pages/index/passWordImg.png" class="possWordImg" mode=""></image>
				<input type="text" password="true" v-model="password" placeholder="请输入新密码" placeholder-style="color:#ffffff;font-size:28rpx;"
				 class="possWordInput" />
			</view>
		</view>
		<view class="passWord">
			<image src="/static/pages/index/loginImg.png" mode=""></image>
			<view class="passWordContent">
				<image src="/static/pages/index/passWordImg.png" class="possWordImg" mode=""></image>
				<input type="text" password="true" v-model="passwordOne" placeholder="请确认新密码" placeholder-style="color:#ffffff;font-size:28rpx;"
				 class="possWordInput" />
			</view>
		</view>
		<!-- 登录 -->
		<view class="login" @click="loginClick">
			<image src="/static/pages/index/loginImg1.png" mode="" class="loginImg"></image>
			<view class="loginBox">
				确认修改
			</view>
		</view>
	</view>
</template>

<script>
	import {profile} from '@/request/api.js'
	export default {
		data() {
			return {
				usetMessage: '', //账号
				password: '', //密码
				passwordOne: '',
			}
		},
		onLoad() {

		},
		methods: {
			//普通登录
			loginClick() {
				profile({
					password: this.usetMessage,
					newpassword: this.password,
					quepassword:this.passwordOne,
					type: uni.getStorageSync("regionMessage").type,
					user_id:uni.getStorageSync("regionMessage").id,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if(res.code == 1){
						setTimeout(()=>{
							uni.reLaunch({
								url:"/pages/index/choice"
							})
						},2000)
					}
				})

			},
			backClick() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: linear-gradient(to bottom, #4884E7, #7CAAF6);
		box-sizing: border-box;
	}

	.passWordbox {
		box-sizing: border-box;

		.navBox {
			width: 100%;
			margin-top: calc(var(--status-bar-height) + 30rpx);
			justify-content: space-between;
			position: relative;

			.icon_back_lift {
				width: 22rpx;
				height: 38rpx;
				margin-left: 40rpx;
				position: absolute;
				top: 5rpx;
				left: 10rpx;
			}

			.navWord {
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin: 0 auto;
			}
		}

		.account {
			width: 693rpx;
			height: 126rpx;
			margin: 263rpx auto 0;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.accountContent {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;

				.possWordImg {
					width: 68rpx;
					height: 68rpx;
					margin: 30rpx 0 0 26rpx;

				}

				.accInput {
					margin: 40rpx 0 0 18rpx;
					color: #FFFFFF;
				}
			}
		}

		.passWord {
			width: 693rpx;
			height: 126rpx;
			margin: 62rpx auto 0;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.passWordContent {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;

				.possWordImg {
					width: 68rpx;
					height: 68rpx;
					margin: 30rpx 0 0 26rpx;

				}

				.possWordInput {
					margin: 40rpx 0 0 18rpx;
					color: #FFFFFF;
				}
			}
		}

		.login {
			width: 527rpx;
			height: 119rpx;
			margin: 120rpx auto 0;
			position: relative;

			.loginImg {
				width: 100%;
				height: 100%;
			}

			.loginBox {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				text-align: center;
				line-height: 119rpx;
				font-size: 30rpx;
				color: #1855F6;
			}
		}

		.wxLogin {
			width: 100%;
			margin-top: 80rpx;
			display: flex;

			.wxNav {
				display: flex;
				margin: 0 auto;

				.wxNavWire1 {
					width: 200rpx;
					height: 2rpx;
					background-color: #FFFFFF;
					margin-top: 20rpx;
				}

				.wxNavWord {
					font-size: 30rpx;
					color: #FFFFFF;
					margin: 0 21rpx;
				}

				.wxNavWire2 {
					width: 200rpx;
					height: 2rpx;
					background-color: #FFFFFF;
					margin-top: 20rpx;
				}
			}
		}

		.wxLoginImg {
			margin-top: 133rpx;
			display: flex;
			justify-content: space-around;

			.wxLoginImgContent {
				display: flex;

				.loginWx {
					width: 56rpx;
					height: 45rpx;
				}

				.wxLoginWord {
					font-size: 30rpx;
					color: #FFFFFF;
					margin-left: 24rpx;
				}
			}
		}
	}
</style>
